<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="40%" :show-close='false' class="equipCheckDialog" :closeOnClickModal='false' :append-to-body='true'>
		<span slot="title" class="dialog-title">
			选择角色
			<el-button type="primary" size="mini" @click = "submitCopy"  class="popupClose" style="margin-right:70px;">确 定</el-button>
			<el-button size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="copyData" ref="testpanelForm">
			<el-form-item label="水司">
				<el-col :span="22">
					<el-cascader :key="isResouceShow" v-model="copyData.department" :options="shuisiOptions"  @change="handleChange" size="mini" style="width:100%;"  filterable clearable></el-cascader>

				</el-col>
			</el-form-item>
			<el-form-item label="角色">
				<el-col :span="22">
					<el-select v-model="copyData.role" placeholder="请选择" size="mini" filterable style="width:100%;" @change = "selectRole">
						<el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
					</el-select>
				</el-col>
			</el-form-item>
		</el-form>
		<!--<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click = "submitCopy">确 定</el-button>
			<el-button size="mini" @click="close">取 消</el-button>
		</span>-->
	</el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data() {
		return {
			copyData: {
				department: "",
				role: "",
			},
			shuisiOptions: [],
			roleData:[],
			copyChecked:[], //选中的菜单
			isResouceShow:false,
			// props: {
			// 	children: 'children',
			// 	label: 'shortname',
			// }
		}
	},
	computed: {
		...mapState(['typeQcSelect']),
		sampleTableHeight() {
			return ((window.innerHeight - 310))
		},
	},
	components: {

	},
	props: ['addVisible', "treedata", "appvalue","menuChecked"],
	mounted() {
	},
	watch: {
		addVisible(val, oldVal) {
			if (val) {
				console.log(this.treedata, this.appvalue)
				this.shuisiOptions = JSON.parse(JSON.stringify(this.treedata))
				this.isResouceShow = true;
				this.shuisiOptions[0].datacenterkey = "root"
				this.shuisiOptions = this.deepClone(this.shuisiOptions)
				console.log(this.shuisiOptions)

			}
		}
	},
	methods: {
		handleChange(val) {
			console.log(val,val[val.length - 1])
			var data = {
				target:val[val.length - 1],
				appid:this.appvalue
			}
			this.$http({
					method: 'get',
					apiUrl: 'systemmanage/selSysRoleListByTarget.htm',
					params: data,
					isJson: false
				}).then(res => {
					if(res.code == 0) {
						this.roleData = res.data;
					} 
				});

		},
		selectRole(val){
			this.$http({
					apiUrl: 'systemmanage/selSysRoleFunctionByRoleId.htm',
					method: "post",
					params: {roleId:val},
					isJson:false,
				}).then(res => {
					if(res.code == 0) {
						this.copyChecked = [];
						
						for(var i = 0; i < res.data.length; i++) {	
							if(res.data[i].target == 'oper'){
								this.copyChecked.push(res.data[i].oid)
							}
						}
						
					}
				})
		},
		submitCopy(){
			this.$nextTick(() => {
				this.$parent.$refs.tree1.setCheckedKeys([]);
				this.$emit('update:menuChecked', this.copyChecked);
				this.close();
			})
			

		},

		//关闭
		close(formName) {
			this.isResouceShow = false;
			this.$emit('update:addVisible', false);
			this.copyData = {
				department: "",
				role: "",
			};
			this.shuisiOptions = [];
			this.copyChecked = [];
		},
		// 处理检测方法数据，id，code转换成value
		deepClone(obj) {
			var result, oClass = this.isClass(obj);
			//确定result的类型
			if (oClass === "Object") {
				result = {};
			} else if (oClass === "Array") {
				result = [];
			} else {
				return obj;
			}
			for (let key in obj) {
				var copy = obj[key];

				if (this.isClass(copy) === "Object") {
					result[key] = this.deepClone(copy);//递归调用
				} else if (this.isClass(copy) === "Array") {

					if (obj['children'].length !== 0) {
						result['children'] = this.deepClone(copy);//递归调用
					}
				} else {
					if (key === 'ename') {
						result['label'] = obj[key];
					}
					if (key === 'code') {
						result['value'] = obj[key];
					}
					if (key === 'children' && obj[key].length !== 0) {
						result['children'] = obj[key];
					}
				}
			}
			return result;

		},
		//返回传递给他的任意对象的类
		isClass(o) {
			if (o === null) return "Null";
			if (o === undefined) return "Undefined";
			return Object.prototype.toString.call(o).slice(8, -1);
		},

	}
}

</script>
<style scoped>

</style>
<style>
.equipCheckDialog .el-dialog {
	margin-top: 20vh !important;
	height: 50%;
}

.equipCheckDialog .el-dialog .el-dialog__header {
	height: 40px;
	line-height: 20px;
	padding: 10px 20px;
	border-bottom: 1px solid #eeeeee
}

.equipCheckDialog .el-dialog .el-dialog__body {
	height: calc(100% - 85px);
	padding: 10px;
}

.equipCheckDialog .equipUseRecord .el-form-item {
	width: 49%;
	float: left;
	margin-bottom: 10px;
}
</style>